import React from 'react';
import { Button,ButtonGroup,ButtonToolbar,Grid,Row,Col,Thumbnail,Panel,Well,Image } from 'react-bootstrap';
var Loading = require('react-loading');
import {spApi} from '../apis/sp.js';

//专题查看
var SpView= React.createClass({
  getInitialState: function () {
    return {
       episodes:[],
	   title:""
    }
  },
  componentWillReceiveProps:function(nextProps){
	 this.props.params.season_id =nextProps.params.season_id
	  this.componentWillMount()
  },
  componentWillMount:function(){
	  console.log(this.props)
	  this.setState({loaded:false});
	  //取得专题视频
	  spApi.getSpview(this.props.params.season_id)
      .then(function (ret) {
		console.log(ret)
		this.setState({
		  loaded:true,
		  title:ret.result.title,
		  episodes :ret.result.episodes
        })
		
      }.bind(this))
  },
  render:function(){
	 if(this.state.loaded){
		 
	 
	 
	 return (
	 
	     <Panel header={this.state.title}>  
		
		        <Grid>
                 <Row>
		          {
			           this.state.episodes.map(function (s) {
						     var url ="#/movie/"+s.av_id;
                             return (
							    <Col xs={6} md={4}>
                                   <Thumbnail src={s.cover} alt="242x200"  href={url}>
								     <table className="bangumi_table">
									  <tr>
									    <td>
                                        <span className="badge bangumi_index">{s.index}</span>
										</td>
										<td>
										<h5>{s.index_title}</h5>
										</td>
									  </tr>
									  </table>
                                   </Thumbnail>
                                </Col>
							 )
                       })
		          }
          
                 </Row>
				</Grid> 
             
         </Panel>
	 
	 )
	 }
	 else
		return (
	       <Panel header="专题">  
		      <Loading type='balls' color='#e3e3e3' />
            </Panel>
	    )
  }
});


export {SpView}
